<template>
  <div>
    <!-- 培训课程页 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          v-hasPermi="['31110']"
          @click="handleAdd"
          >添加课程</el-button
        >
      </el-col>
      <!-- 搜索  关键字：手机号+姓名 -->
      <el-form
        :model="queryParams"
        ref="queryForm"
        v-show="showSearch"
        :inline="true"
        label-width="80px"
      >
        <el-form-item label="课程分类" prop="curriculumType">
          <treeselect
            v-model="queryParams.curriculumType"
            :options="courseOptions"
            :show-count="true"
            placeholder="请选择课程分类"
            style="width: 210px"
            size="small"
          />
        </el-form-item>
        <el-form-item label="培训讲师" prop="speakerId">
          <el-select
            v-model="queryParams.speakerId"
            placeholder="请选择"
            @change="changeTteacher"
          >
            <el-option
              v-for="item in teacherOptions"
              :key="item.theid"
              :label="item.thename"
              :value="item.theid"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="关键字" prop="keywords">
          <el-input
            v-model="queryParams.keywords"
            placeholder="请输入课程名称"
            clearable
            style="width: 210px"
            @keyup.enter.native="handleQuery"
            size="small"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-row>

    <el-table v-loading="loading" :data="tableList" :border="true">
      <el-table-column
        label="课程类型"
        prop="typeVal"
        align="center"
        width="110"
      ></el-table-column>
      <el-table-column
        label="课程分类"
        prop="classification"
        align="center"
        width="120"
      />
      <el-table-column label="课程名称" prop="title" align="center" width="120">
        <template slot-scope="scope">
          <span @click="handleSee(scope.row)" class="active">{{
            scope.row.title
          }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="thePic" label="课程封面" width="80">
        <template slot-scope="scope">
          <imagePreview :src="scope.row.thePic" />
        </template>
      </el-table-column>
      <el-table-column
        label="培训讲师"
        prop="speaker"
        align="center"
        width="100"
      />
      <el-table-column
        label="课程介绍"
        prop="introduce"
        align="center"
        width="220"
      ></el-table-column>
      <el-table-column
        label="培训课时"
        prop="classHours"
        align="center"
        width="90"
      ></el-table-column>
      <el-table-column
        label="培训学分"
        prop="credit"
        align="center"
        width="90"
      ></el-table-column>

      <el-table-column
        label="阅读量"
        prop="theUsage"
        align="center"
        width="90"
      ></el-table-column>
      <el-table-column
        label="发布时间"
        prop="releaseTime"
        align="center"
        width="120"
      ></el-table-column>
      <el-table-column
        label="发布人"
        prop="publisher"
        align="center"
        width="100"
      ></el-table-column>
      <!-- <el-table-column
        label="归档"
        prop="publisher"
        align="center"
        width="100"
      ></el-table-column> -->
      <!-- <el-table-column label="归档（是/否）" align="center" key="enable">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.enable"
            :active-value="1"
            :inactive-value="0"
            @change="handleStatusChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column> -->
      <el-table-column label="状态" align="center" key="enable">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.enable"
            :active-value="1"
            :inactive-value="0"
            @change="handleStatusChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        fixed="right"
        width="150"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            v-hasPermi="['31120']"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            v-hasPermi="['31130']"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
          <el-button size="mini" type="text" @click="handleSet(scope.row)"
            >设置课程</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.currentPage"
      :limit.sync="queryParams.pagesize"
      @pagination="getList"
    />
    <!-- 添加或修改角色配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        :validate-on-rule-change="false"
        label-width="80px"
      >
        <!-- *【课程分类】（树状下拉框）、*课程名称、*课程封面、课程介绍、【培训讲师】（下拉框）、*培训学时、*培训学分、*【课程类型】（下拉框） -->
        <el-form-item label="课程类型" prop="typeId">
          <treeselect
            v-model="form.typeId"
            :options="courseOptions"
            :show-count="true"
            placeholder="请选择课程类型"
            @select="selecourse"
          />
        </el-form-item>
        <el-form-item label="课程分类" prop="classificationId">
          <treeselect
            v-model="form.classificationId"
            :options="courseKindsOptions"
            :show-count="true"
            @select="selectTree"
            placeholder="请选择课程分类"
            noOptionsText="暂无数据"
          />
        </el-form-item>
        <el-form-item label="课程名称" prop="title">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="课程封面" prop="thePic">
          <uploadImage v-model="form.thePic" />
        </el-form-item>
        <el-form-item label="课程介绍" prop="introduce">
          <el-input v-model="form.introduce" placeholder="请输入课程介绍" />
        </el-form-item>
        <el-form-item label="培训讲师" prop="speakerId">
          <el-select
            v-model="form.speakerId"
            placeholder="请选择培训讲师"
            @change="changeTteacher"
          >
            <el-option
              v-for="item in teacherOptions"
              :key="item.theid"
              :label="item.thename"
              :value="item.theid"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="培训时间" prop="startTime">
          <el-date-picker
            v-model="dateRange2"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changeDate"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="年份">
          <el-date-picker
            v-model="form.curriculumYear"
            type="year"
            placeholder="选择年"
          >
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="培训学时" prop="classHours">
          <el-input v-model="form.classHours" placeholder="请输入培训学时" />
        </el-form-item>
        <el-form-item label="培训学分" prop="credit">
          <el-input v-model="form.credit" placeholder="请输入学分" />
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 查看课程 -->
    <el-dialog
      title="查看课程"
      :visible.sync="open2"
      width="800px"
      append-to-body
    >
      <!-- accordion -->
      <el-collapse v-model="activeNames">
        <!-- <div class="title">课程信息</div> -->
        <el-collapse-item title="课程信息" name="1">
          <el-form ref="form" :model="form" label-width="80px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="课程封面" prop="thePic">
                  <uploadImage v-model="form.thePic" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="课程介绍" prop="introduction">
                  <el-input v-model="form.introduce" disabled />
                </el-form-item>
                <el-form-item label="培训学时" prop="classHours">
                  <el-input v-model="form.classHours" disabled />
                </el-form-item>
                <el-form-item label="培训学分" prop="credit">
                  <el-input v-model="form.credit" disabled />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="其他信息" name="2">
          <el-table
            v-loading="CourseLoading"
            :data="CourseDetails"
            :border="true"
            max-height="400px"
          >
            <!-- <el-table-column
            label="序号"
            prop="remark"
            align="center"
            width="150"
          /> -->
            <el-table-column
              label="标题"
              prop="title"
              align="center"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column label="类型" prop="theType" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.category == 1 && scope.row.theType == 1"
                  >富文本文章</span
                >
                <span v-if="scope.row.category == 1 && scope.row.theType == 2"
                  >PPT</span
                >
                <span v-if="scope.row.category == 1 && scope.row.theType == 3"
                  >PDF</span
                >
                <span v-if="scope.row.category == 1 && scope.row.theType == 4"
                  >WORD</span
                >
                <span v-if="scope.row.category == 2 && scope.row.theType == 1"
                  >MP4</span
                >
                <span v-if="scope.row.category == 2 && scope.row.theType == 2"
                  >腾讯视频</span
                >
                <!-- <span v-if="scope.row.theType === 7">mp3</span>
                <span v-if="scope.row.theType === 8">wav</span> -->
              </template>
            </el-table-column>
            <el-table-column
              label="时长"
              prop="classHours"
              align="center"
            ></el-table-column>
            <el-table-column label="学分" prop="credit" align="center" />
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
              fixed="right"
              width="100"
            >
              <template slot-scope="scope">
                <div>
                  <el-button
                    size="mini"
                    type="text"
                    @click="courseDelete(scope.row)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="submitForm2">确 定</el-button> -->
        <el-button @click="cancel2">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 设置课程 弹框 -->
    <el-dialog
      title="设置课程"
      :visible.sync="SetupCourses"
      width="800px"
      append-to-body
      class="set-course"
    >
      <!-- tab切换 -->
      <el-tabs v-model="kindtypeId" @tab-click="handleClick">
        <el-tab-pane label="文章" name="article">
          <el-form
            ref="form"
            :model="resourceParams"
            :inline="true"
            label-width="80px"
            @submit.native.prevent
          >
            <!-- @keyup.enter.native="handleQuery" -->
            <el-form-item label="选择资源" prop="theType">
              <el-select
                v-model="resourceParams.theType"
                placeholder="请选择"
                @change="changeResources"
              >
                <el-option
                  v-for="item in resourcesOptions"
                  :key="item.tid"
                  :label="item.label"
                  :value="item.tid"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="选择行业"
              prop="industryId"
              v-show="resourceParams.theType === 2"
            >
              <el-select
                v-model="resourceParams.industryId"
                placeholder="请选择"
                @change="changeIndustry"
              >
                <el-option
                  v-for="item in industryOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="选择分类" prop="category">
              <treeselect
                v-model="resourceParams.category"
                :options="classOptions"
                :show-count="true"
                placeholder="请选择分类"
                style="width: 240px"
                @select="selectResourceTree"
              />
            </el-form-item>
          </el-form>
          <el-table
            v-loading="loadingCourse"
            height="400px"
            :data="courseTable"
            :border="true"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center" />
            <!-- 资源库类型 1-公共资料库 2-行业资料库 3-企业资料库 -->
            <el-table-column
              v-if="resourceParams.theType == 1"
              label="公共栏目分类"
              align="center"
              prop="publicClassification"
            />
            <el-table-column
              v-if="resourceParams.theType == 2"
              label="公共栏目分类"
              align="center"
              prop="industryClassification"
            />
            <el-table-column
              v-if="resourceParams.theType == 3"
              label="公共栏目分类"
              align="center"
              prop="enterpriseClassification"
            />
            <el-table-column label="标题" prop="label" align="center" />
            <el-table-column align="center" prop="thumb" label="配图">
              <template slot-scope="scope">
                <imagePreview :src="scope.row.thumb" />
              </template>
            </el-table-column>
            <!-- <el-table-column
              label="文章内容"
              prop="content"
              align="center"
              :show-overflow-tooltip="true"
            /> -->
          </el-table>
          <pagination
            v-show="resourceTotal > 0"
            :total="resourceTotal"
            :page.sync="resourceParams.currentPage"
            :limit.sync="resourceParams.pagesize"
            @pagination="getResource"
          />
        </el-tab-pane>
        <el-tab-pane label="视频" name="video">
          <el-form
            ref="form"
            :model="resourceParams"
            :inline="true"
            label-width="80px"
            @submit.native.prevent
          >
            <!-- @keyup.enter.native="handleQuery" -->
            <el-form-item label="选择资源" prop="theType">
              <el-select
                v-model="resourceParams.theType"
                placeholder="请选择"
                @change="changeResources"
              >
                <el-option
                  v-for="item in resourcesOptions"
                  :key="item.tid"
                  :label="item.label"
                  :value="item.tid"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="选择行业"
              prop="industryId"
              v-show="resourceParams.theType === 2"
            >
              <el-select
                v-model="resourceParams.industryId"
                placeholder="请选择"
                @change="changeIndustry"
              >
                <el-option
                  v-for="item in industryOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="选择分类" prop="category">
              <treeselect
                v-model="resourceParams.category"
                :options="classOptions"
                :show-count="true"
                placeholder="请选择分类"
                style="width: 240px"
                @select="selectResourceTree"
              />
            </el-form-item>
          </el-form>
          <el-table
            v-loading="loadingCourse"
            height="400px"
            :data="courseTable"
            :border="true"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center" />
            <!-- 资源库类型 1-公共资料库 2-行业资料库 3-企业资料库 -->
            <el-table-column
              v-if="resourceParams.theType == 1"
              label="公共栏目分类"
              align="center"
              prop="publicClassification"
            />
            <el-table-column
              v-if="resourceParams.theType == 2"
              label="公共栏目分类"
              align="center"
              prop="industryClassification"
            />
            <el-table-column
              v-if="resourceParams.theType == 3"
              label="公共栏目分类"
              align="center"
              prop="enterpriseClassification"
            />
            <el-table-column label="标题" prop="label" align="center" />
            <el-table-column align="center" prop="thumb" label="配图">
              <template slot-scope="scope">
                <imagePreview :src="scope.row.thumb" />
              </template>
            </el-table-column>
            <!-- <el-table-column
              label="视频介绍"
              prop="introduction"
              align="center"
              :show-overflow-tooltip="true"
            /> -->
          </el-table>
          <pagination
            v-show="resourceTotal > 0"
            :total="resourceTotal"
            :page.sync="resourceParams.currentPage"
            :limit.sync="resourceParams.pagesize"
            @pagination="getResource"
          />
        </el-tab-pane>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormCourse">确 定</el-button>
        <el-button @click="SetupCourses = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UploadImage from "@/components/ImageUpload";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

import {
  listData,
  getData,
  delData,
  addData,
  updateData,
  delMultiData,
  getSelect,
  getEnable,
  teacherList,
  getkinds,
  getclass,
  getclassList,
  setCourse,
  delCourseResource,
} from "@/api/trainAdmin/trainCourse";
import { getClassTree } from "@/api/system/classification";
import { getInstitutions, getDepartment, getDict } from "@/api/select";
import { getClassTree as getIndustryTree } from "@/api/system/industryClass";
import { listData as resourceListData } from "@/api/dataBase/dataBase";
export default {
  name: "trainCourse",
  data() {
    return {
      cur: 1,
      tabs: ["文章", "视频"],
      value: "",
      activeNames: ["1"],

      currRowId: null, //当前操作行id  查看课程（删除资源）、设置课程（设置资源）会用到

      // 设置课程
      SetupCourses: false,
      kindtypeId: "article",
      // 设置课程 下拉框
      kindsOptions: [
        { id: 1, label: "文章" },
        { id: 2, label: "视频" },
      ],
      resourcesOptions: [
        { tid: 1, label: "公共资源" },
        { tid: 2, label: "行业资源" },
        { tid: 3, label: "企业资源" },
      ],
      industryOptions: [], //所属行业下拉框
      industryParams: {
        //获取所属行业对应行业资源分类
        industryId: undefined,
        industry: undefined,
        topLevel: 0,
      },
      classOptions: [], //选择对应分类下拉框
      loadingCourse: false,
      resourceParams: {
        //获取 对应分类的 资源列表 参数
        currentPage: 1,
        pagesize: 10,
        resourceType: 1, //资源类别 1-文章 2-视频 3-音频 4-图片
        theType: undefined, //资源库类型 1-公共资料库 2-行业资料库 3-企业资料库
        category: undefined, //类别 id
        industryId: undefined, //只是页面需要 接口不需要
      },
      resourceTotal: 0,
      courseTable: [],
      courseIdStr: "", //多选框选中数据 id串

      courseOptions: [],
      courseKindsOptions: [],
      teacherOptions: [],
      CourseDetails: [], // 课程明细
      CourseLoading: true,
      queryParams: {
        currentPage: 1,
        pagesize: 10,
        curriculumType: undefined,
        speakerId: undefined,
        keywords: undefined,
      },

      showSearch: true,
      total: 0,
      loading: true,
      tableList: [],
      title: "",
      open: false,
      form: {},
      rules: {
        typeId: [
          { required: true, message: "课程类型不能为空", trigger: "blur" },
        ],
        categoryId: [
          { required: true, message: "课程分类不能为空", trigger: "blur" },
        ],
        classificationId: [
          { required: true, message: "课程分类不能为空", trigger: "blur" },
        ],
        title: [
          { required: true, message: "课程名称不能为空", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        thePic: [
          { required: true, message: "课程封面不能为空", trigger: "blur" },
        ],
        // classHours: [
        //   { required: true, message: "培训学时不能为空", trigger: "blur" },
        // ],
        // credit: [
        //   { required: true, message: "培训学分不能为空", trigger: "blur" },
        // ],
        deptId: [
          { required: true, message: "课程类型不能为空", trigger: "blur" },
        ],
      },
      dateRange: [],
      open2: false,
      dateRange2: [],
    };
  },
  components: { Treeselect, UploadImage },
  created() {
    this.getSelect();
    this.getList();
    this.getTeacher();
    getDict(16, 0).then((response) => {
      //16-课程类型
      this.courseOptions = response.result.data;
      // console.log(this.courseOptions);
    });

    // this.getClass();
  },
  methods: {
    changeHier(val) {
      // if (this.kindsOptions.length > 0) {
      //   this.form.curriculumClassification = val
      //     ? this.kindsOptions.find((ele) => ele.id === val).label
      //     : "";
      // }
    },
    getList() {
      this.loading = true;
      listData(this.queryParams).then((response) => {
        this.tableList = response.result.rows;
        this.total = response.result.total;
        this.loading = false;
      });
    },
    getSelect() {
      getSelect().then((response) => {
        // this.courseOptions = response.result.curriculumCategory; //课程分类
      });
    },
    getTeacher() {
      teacherList(this.queryParams).then((response) => {
        this.teacherOptions = response.result.rows;
        // console.log(this.teacherOptions);
      });
    },
    handleQuery() {
      this.queryParams.currentPage = 1;
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加";
    },
    handleUpdate(row) {
      this.reset();
      const theId = row.theid;
      getData(theId).then((response) => {
        this.getClassTree(response.result.typeId);
        this.form = response.result;
        this.$set(this.dateRange2, 0, response.result.startTime);
        this.$set(this.dateRange2, 1, response.result.endTime);
        this.form.curriculumYear = this.form.curriculumYear.toString();
        this.open = true;
        this.title = "修改";
      });
    },
    submitForm() {
      console.log("this.form", this.form);
      if (this.dateRange2 != null) {
        this.form.startTime = this.dateRange2[0];
        this.form.endTime = this.dateRange2[1];
      }
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.theid != undefined) {
            updateData(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addData(this.form).then((response) => {
              this.msgSuccess("添加成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    cancel() {
      this.open = false;
      this.reset();
    },
    resetcourseform() {
      this.courseIdStr = "";
      this.resourceParams = {
        //获取 对应分类的 资源列表 参数
        currentPage: 1,
        pagesize: 10,
        resourceType: 1, //资源类别 1-文章 2-视频 3-音频 4-图片
        theType: 1, //资源库类型 1-公共资料库 2-行业资料库 3-企业资料库
        category: undefined, //类别 id
        industryId: undefined, //只是页面需要 接口不需要
      };
      this.classOptions = [];
    },
    reset() {
      this.form = {
        typeId: undefined, // 课程类型id
        typeVal: undefined, // 课程类型
        classificationId: undefined, //课程分类 id
        classification: undefined, //课程分类
        title: undefined, //课程名称
        introduce: undefined, //课程介绍
        thePic: undefined, //资源配图
        speakerId: undefined, //主讲人 id
        speaker: undefined, //主讲人
        classHours: undefined, //资源学时
        credit: undefined, //资源学分
        curriculumYear: undefined, //课程年份
        publisherId: this.$store.state.userInfo.theid, //发布人id
        publisher: this.$store.state.userInfo.thename, //发布人
        theid: undefined, //id
        startTime: undefined, //课程开始时间
        endTime: undefined, //课程结束时间
      };
      this.dateRange2 = [];
      this.resetForm("form");
    },
    handleDelete(row) {
      const theId = row.theid;
      this.$confirm('是否确认' + text + '"?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          // 调接口
          return delData(theId);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        });
    },
    handleStatusChange(row) {
      console.log("row--", row);
      let text = row.enable === 0 ? "启用" : "停用";
      this.$confirm('是否确认' + text + '"?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          // 调接口 改变状态值
          return getEnable(row.theid, row.enable);
        })
        .then(() => {
          this.msgSuccess(text + "成功");
        })
        .catch(function () {
          row.enable = row.enable === 0 ? 1 : 0;
        });
    },
    handleSee(row) {
      const theid = row.theid;
      this.currRowId = row.theid;
      this.CourseLoading = true;
      this.CourseDetails = [];
      getData(theid).then((response) => {
        console.log("查看", response);
        this.form = response.result;
        this.CourseDetails = response.result.resourceList;
        // this.CourseDetails = JSON.parse(response.result.resourceList);
        this.CourseLoading = false;
        this.open2 = true;
      });
    },
    // 查看课程 删除---
    courseDelete(row) {
      let that = this;
      const theId = this.currRowId; //课程 id
      const resourceId = row.id; //课程资源 id
      this.$confirm("是否确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function () {
        // 调接口
        delCourseResource(theId, resourceId).then((response) => {
          that.msgSuccess("删除成功");
          that.CourseDetails = that.CourseDetails.filter((item, index) => {
            return item.id != resourceId;
          });
        });
      });
    },

    /** 设置课程------------------------------- */
    // 设置课程
    handleSet(row) {
      // 获取当前行数据  资源id列表
      // this.courseIdStr  赋值给this.courseIdStr
      this.currRowId = row.theid;
      this.SetupCourses = true;
      // this.title = "课程设置";
      this.resetcourseform();
      this.changeResources(this.resourceParams.theType);
    },
    // 切换按钮
    // 切换 文章、视频
    handleClick(val) {
      console.log("kindtypeId---", this.kindtypeId);
      this.resetcourseform();
      if (this.kindtypeId == "article") {
        this.resourceParams.resourceType = 1;
      } else if (this.kindtypeId == "video") {
        this.resourceParams.resourceType = 2;
      }
      this.changeResources(this.resourceParams.theType);
      // this.getResource()
    },
    // 选择资源
    changeResources(val) {
      if (this.resourcesOptions.length > 0) {
        this.resourceParams.resourcesval = val
          ? this.resourcesOptions.find((ele) => ele.tid === val).label
          : "";
      }
      this.classOptions = [];
      // this.$set(this.form, "singleNum", rules.singleNum);
      this.resourceParams.category = undefined;
      this.resourceParams.industryId = undefined;
      // 资源库类型 1-公共资料库 2-行业资料库 3-企业资料库
      if (val === 1) {
        // 15-公共资源分类 1
        getDict(15, 1).then((response) => {
          this.classOptions = response.result.data;
          if (this.classOptions.length > 0) {
            this.resourceParams.category = this.classOptions[0].id;
          }
          this.getResource();
        });
      } else if (val === 2) {
        // 13-行业资源分类 0  这个接口废弃了 现在用行业资源分类页面接口
        getDict(1, 1).then((response) => {
          // 1-所属行业 1
          this.industryOptions = response.result.data;
          if (this.industryOptions.length > 0) {
            this.resourceParams.industryId = response.result.data[0].id;
            this.industryParams.industryId = response.result.data[0].id;
            this.industryParams.industry = response.result.data[0].label;
          }
          this.getIndustryTree();
        });
      } else if (val === 3) {
        // 14-企业资源分类 0
        getDict(14, 0).then((response) => {
          this.classOptions = response.result.data;
          if (this.classOptions.length > 0) {
            this.resourceParams.category = this.classOptions[0].id;
          }
          this.getResource();
        });
      }
    },
    getIndustryTree() {
      getIndustryTree(this.industryParams).then((response) => {
        this.classOptions = response.result.industryClassification;
        if (this.classOptions.length > 0) {
          this.resourceParams.category = this.classOptions[0].id;
        }
        this.getResource();
      });
    },
    // 选择行业
    changeIndustry(val) {
      console.log("行业---", val);
      this.classOptions = [];
      this.resourceParams.category = undefined;
      this.resourceParams.industryId = val;
      this.industryParams.industryId = val;
      if (this.industryOptions.length > 0) {
        this.industryParams.industry = val
          ? this.industryOptions.find((ele) => ele.id === val).label
          : "";
      }
      this.getIndustryTree();
    },
    // 选择分类
    selectResourceTree(val) {
      console.log("Resource--val---", val);
      this.resourceParams.category = val.id;
      console.log("this.resourceParams---", this.resourceParams);
      // 获取对应数据 资源列表
      this.getResource();
    },
    // 获取对应数据 资源列表
    getResource() {
      this.loadingCourse = true;
      resourceListData(this.resourceParams).then((response) => {
        this.courseTable = response.result.rows;
        console.log("this.courseTable---", this.courseTable);
        this.resourceTotal = response.result.total;
        this.loadingCourse = false;
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      let courseIds = selection.map((item) => item.id);
      this.courseIdStr = courseIds.join(",");
    },
    submitFormCourse() {
      console.log("this.courseIdStr---", this.courseIdStr);
      let currRowId = {
        theid: this.currRowId, //id
        resourceList: this.courseIdStr, //资源id列表
      };
      if (this.courseIdStr != "") {
        setCourse(currRowId).then((response) => {
          console.log("设置课程--response---", response);
          this.msgSuccess("设置成功");
          this.currRowId = null;
          this.SetupCourses = false;
        });
      } else {
        return this.msgError("请先选择数据");
      }
    },
    // 取消按钮
    cancel2() {
      this.open2 = false;
      this.reset();
    },
    selectTree(val) {
      console.log(val);
      if (this.courseOptions.length > 0) {
        this.form.classification = val.label;
      }
    },
    selecourse(val) {
      if (this.courseOptions.length > 0) {
        this.form.typeVal = val.label;
      }
      this.form.classificationId = undefined;
      // console.log(this.form.typeVal);
      this.getClassTree(val.id);
    },
    getClassTree(id) {
      var val = {
        typeId: id,
      };
      getClassTree(val).then((response) => {
        console.log("response---", response);
        this.courseKindsOptions = response.result.curriculumclassification;
      });
    },
    changeTteacher(val) {
      // console.log(val);
      if (this.teacherOptions.length > 0) {
        this.form.speaker = val
          ? this.teacherOptions.find((ele) => ele.theid === val).thename
          : "";
      }
    },
    changeDate(val) {
      if (val != null) {
        this.$set(this.form, "startTime", val[0]);
        this.$set(this.form, "endTime", val[1]);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.setupTabs {
  display: flex;
  font-size: 2.1vh;
  p {
    margin-right: 5vh;
  }
  .active {
    color: #409eff;
    border-bottom: #409eff;
  }
}
/deep/ .el-collapse-item__header {
  font-size: 14px;
}
/deep/ .el-collapse-item__header {
  background: #f5f5f5;
  padding-left: 8px;
}
.el-select {
  display: block;
}
.el-table .active {
  color: #409eff;
  cursor: pointer;
  text-decoration: underline;
}
.title {
  margin-bottom: 10px;
  background: #f1e9c8;
  padding: 12px 8px;
}
.mt10 {
  margin-top: 40px;
}
/deep/ [data-v-37cc3516] .el-collapse-item__header {
  background: #f1e9c8;
  height: 40px;
}
/deep/ .el-collapse-item__content {
  padding-bottom: 0;
}

.set-course /deep/ .el-dialog:not(.is-fullscreen) {
  max-height: 730px;
}
.set-course /deep/ .el-dialog__body {
  padding: 10px 20px;
  .el-table {
    margin-top: 0;
  }
  .pagination-container {
    margin-bottom: 0;
  }
}
</style>
